$(document).ready(function() {
    SB.EditAuthorView = Backbone.View.extend({
        template : _.template($('#edit-author-tpl').html()),

        initialize : function() {
            _.bindAll(this, "render", "saveAuthor");
            this.model.on("change", this.render, this);
        },

        events : {
            "submit form" : "saveAuthor"
        },

        render : function() {
            $(this.el).html(this.template(this.model.toJSON()));
            return this;
        },

        saveAuthor : function() {
            var $this = this;
            var params = {};
            params.username = $this.$('#username').val();
            params.about_me = $this.$('#about-me').val();
            $.post("/api/user/update/", params, function(data) {
                window.location.reload();
            });

            return false;
        }
    });

    SB.EditBoardView = Backbone.View.extend({
        template : _.template($('#edit-board-tpl').html()),

        events : {
            'click #save-board' : "saveBoard"
        },

        render : function() {
            $(this.el).html(this.template());
            return this;
        },

        saveBoard : function() {
            var params = {};
            params.name = this.$('#edit-board-name').val();
            $.post('/api/board/create/', params, function(data) {
                data = JSON.parse(data);
                window.location.search = "board_id=" + data.id;
            });
            return false;
        }
    });

    SB.BoardView = Backbone.View.extend({
        events : {
            'click #follow-board' : 'followBoard'
        },

        initialize : function() {
            console.log(SB.user.get('id'));
            console.log(this.model.get('followers'));
            if ($.inArray(SB.user.get('id'), this.model.get('followers')) != -1) {
                this.updateBtn();
            }
            return this;
        },

        updateBtn : function() {
            this.$('#follow-board').toggleClass('btn-primary');
            this.$('#follow-board i').toggleClass('icon-white');
        },

        followBoard : function() {
            var params = {};
            params.board_id = this.model.get('id');
            var $this = this;
            $.post('/api/board/follow/', params, function(data) {
                console.log(data);
                $this.updateBtn();
            });
        }
    });

    SB.ContentView = Backbone.View.extend({
        initialize : function() {
            this.closed = false;
            this.authorBoxWidth = this.$('.author').width();
            console.log("width: " + this.authorBoxWidth);
        },

        render : function() {
            var $this = this;

            // Initialize BoardView Collection
            $.each(SB.boardCollection.models, function(index, model) {
                console.log(model);
                var boardView = new SB.BoardView({
                    model : model,
                    el : "#board-" + model.get('id')
                });
            });

            if (SB.followeeCollection.get(SB.author.get('id'))) {
                this.updateFollowBtn();
            }

            SB.user.on("change", function() {
                console.log("AUTHOR_UPDATED");
                console.log(SB.user);
                $this.$('#author-name').html(SB.user.get('username'));
                $this.$('#author-status').html(SB.user.get('about_me'));
            });
            return this;
        },

        events : {
            'click .control-panel-btn' : "togglePanel",
            'click #edit-author' : "editAuthor",
            'click #new-board' : "createBoard",
            'click #follow-author' : 'followAuthor',
        },

        togglePanel : function() {
            console.log("togglePanel" + this.closed + this.authorBoxWidth);
            if (this.closed == false) {
                this.$(".author").animate({
                    width : 0
                });
                this.$(".control-panel-btn").animate({
                    left : 0
                });
                this.$(".control-panel-btn img").attr('src', '/assets/img/control-panel-openbutton.png');
                $(SB.articleCollectionView.el).animate({
                    "margin-left" : 0
                });

                this.closed = true;
            } else {
                this.$(".author").animate({
                    width : this.authorBoxWidth
                });
                this.$(".control-panel-btn").animate({
                    left : this.authorBoxWidth
                });
                this.$(".control-panel-btn img").attr('src', '/assets/img/control-panel-closebutton.png');
                if ($(window).width() > 480) {
                    $(SB.articleCollectionView.el).animate({
                        "margin-left" : this.authorBoxWidth
                    });
                }

                this.closed = false;
            }
        },

        editAuthor : function() {
            SB.editAuthorView = VM.createView("editAuthorView", function() {
                return new SB.EditAuthorView({
                    model : SB.user
                });
            });

            $.fancybox(SB.editAuthorView.render().el);
            // To focus on the about-me element
            SB.editAuthorView.$('#about-me').click().focus();
        },

        createBoard : function() {
            SB.editBoardView = VM.createView("editBoardView", function() {
                return new SB.EditBoardView();
            });
            $.fancybox(SB.editBoardView.render().el);
            SB.editBoardView.$('#edit-board-name').click().focus();
        },

        updateFollowBtn : function() {
            this.$('#follow-author').toggleClass('btn-primary');
            this.$('#follow-author i').toggleClass('icon-white');
        },

        followAuthor : function() {
            var params = {};
            params.followee_id = SB.author.get('id');
            var $this = this;
            $.post('/api/user/follow/', params, function(data) {
                console.log(data);
                $this.updateFollowBtn();
            });
        },
    });

    SB.contentView = new SB.ContentView({
        el : ".content",
    });
    SB.contentView.render();

    // Update content view on multiple events
    SB.Events.on("AUTHOR_UPDATED", function() {
        console.log("AUTHOR_UPDATED");
        console.log(SB.user);
        SB.contentView.$('#author-name').html(SB.user.get('username'));
        SB.contentView.$('#author-status').html(SB.user.get('about_me'));
    });

});
